<%@page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>
		<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/sectionparent.css" source="widget" />
		<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/admin.css" source="widget" />
        <link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/new-add-goods.css" source="widget" />
	   	<style>
select {
	padding-left: 4px;
	font-size: 10px;
	border-radius: 10px;
	background-image: none;
	border: 1px solid #dadada;
	color: #8b8b8b;
}

.checkTitle ul li {
	color: #565252;
	font-size: 14px;
	float: left;
}

.checkTitle ul li  a:active {
	border-right: 1px solid #CBD5DD;
	padding: 2px 15px 12px 15px;
	border-top: 1px solid #cbd5dd;
}

.checkTitle li.active {
	border-color: #CBD5DD !important;
	border-bottom-color: #fff !important;
}

.btn_addPic {
	display: inline-block;
	position: relative;
	height: 41px;
	overflow: hidden;
	padding: 0 20px;
	border: 1px solid #EBEBEB;
	background: none repeat scroll 0 0 #F9C771;
	color: #fff;
	font: 14px/39px 'MicroSoft Yahei', 'Simhei';
	cursor: pointer;
	text-align: center;
	margin-top: 20px;
	margin-left: 20px;
	width: 140px;
}

.inputClass {
	height: 30px;
	width: 200px;
	margin-left: 20px;
	margin-top: 25px;
	border: 1px solid #CBD5DD;
	text-indent: 10px;
	float: left;
}

.addorcancleAttr {
	width: 45px;
	height: 25px;
	margin-left: 10px;
	padding-top: 5px;
	padding-left: 10px;
	background-color: #F9C771;
	color: white;
	cursor: pointer;
	float: left;
	margin-top: 26px;
}

.emStyle {
	color: #7da4cc;
	position: absolute;
	line-height: 43px;
	margin-left: -12px;
    margin-top: 7px;
}
.current-pic{
	position:absolute;
	bottom:0;
	left:0;
}
.wrap-box{
	position:relative;
}

</style>
		
   		<section style="margin-top:40px;">
	         <div class="panel panel-default">
		         <c:if test="${type == 1 }">
					<div class="forword_area"></div>
					<div class="location">新增商品信息</div>
				 </c:if>
		         <c:if test="${type == 2 }">
					<div class="forword_area"></div>
					<div class="location">编辑商品信息</div>
				 </c:if>
			</div>
			  <div style="height:30px;line-height:30px;margin-bottom:17px;overflow:hidden">
					<div style="float:left;height: 31px;width:120px;margin-left:10px;color:#808080;font-size:14px;cursor: pointer;"onclick="gotoGoodsInfo(this)">
						<div class="wrap-box">
							<input type="hidden" value="0"/>
							<img id="selected1" src="${ctx}/images/seller/coupon/select_yellow.png" style="margin-right:15px;margin-top:-4px;" >商品信息
							<img class="current-pic"src="${ctx}/images/seller/coupon/currpic.png">
						</div>
					</div>
					<div style="float:left;height: 31px;width:120px;color:#808080;font-size:14px;cursor: pointer;" onclick="">
					  	<input type="hidden" value="1"/>
						<img id="selected2" src="${ctx}/images/seller/coupon/select_blue.png" style="margin-right:15px;margin-top:-4px;">商品简介
					</div>
		            <div style="float:left;height: 31px;width:120px;color:#808080;font-size:14px;cursor: pointer;" onclick="">
		            	 <input type="hidden" value="2"/>
		            	<img id="selected3" src="${ctx}/images/seller/coupon/select_blue.png" style="margin-right:15px;margin-top:-4px;" >商品规格
		            </div>
                </div><!--end 搜索栏 -->	
           
         
				<div id="goodsInfo" class="form" style="min-height:350px;border: 1px solid #dadada;">
					<div class="itemEditMap" style="height:160px;">
						<input id="goodsId" type="hidden" value="${goodsInfo.id }">
						<input id="imageLogo" type="hidden" value="${goodsInfo.logo }">
						<span class="col-sm-1 editlableEditMap" style="height:160px;line-height: 160px;">图片缩略图：</span>
						<div class="flEditMap" style="margin-top:20px;">
						
							<c:if test="${goodsInfo.logo == null || goodsInfo.logo == ''}">
									<img id="preview3" style="width:100px;height:100px;border-radius:14px;float:left;" title="快上传小区头像吧" src="${ctx}/images/default.jpg" />
							</c:if>
							<c:if test="${goodsInfo.logo != null && goodsInfo.logo != ''}">
								<img id="preview3" style="width:100px;height:100px;border-radius:14px;float:left;" src="${sessionScope.image_logo}${goodsInfo.logo}" />
							</c:if>
							<div class="mtjxsa" style="float:left;margin-top: 28px;">
								  <p style="text-align: left" id="imageBtn">
									  <input type="hidden" name="imageLogoUrl" id="imageLogoUrl" />
									  <img style="margin-left:23px;margin-top: -5px;" src="${ctx}/images/seller/goods/tip.png"/>
									  <span style="color:#262535;font-size:14px;">提示：只能上传.jpg, .png的图片格式,照片文件大小最大为10MB</span>
								  </p>
								  <div>
							    	  <div class="fl" style="margin-left:25px;">
							    		  <button style="width:100px;height:30px;background-color: #F9C771;border-radius: 4px;color: #fff;margin-top: 10px;border: 0px;" class="acblu tctpsc">上传图片</button>
							          </div>
							      </div>
							  </div>
							<%@include file="/views/common/uploader/picture.jsp" %>
						</div>
					</div>
					<div class="itemEdit">
						<input id="goodsId" type="hidden" value="${goodsInfo.id }">
						<span class="col-sm-1 editlableEdit"><em class="emStyle">*</em>商品名称：</span>
						<div class="flEdit">
							<input class="controlEdit" id="goodsName" value="${goodsInfo.name }" type="text"  class="text"
							onblur="checkGoodsName()" maxlength="20" placeholder="请输入名称"/>
						</div>
					</div>
					<div class="itemEdit">
						<span class="col-sm-1 editlableEdit"><em class="emStyle">*</em>商品分类：</span>
						<div class="flEdit" style="width:56%;">
							<select id="firstCategory" onblur="checkGoodsCategaryOne()" style="height:37px;line-height: 37px;width:251px;margin-top: 6px;font-size: 12px;">  
	                  			<option value="">--一级分类--</option> 
	                  			<c:forEach items="${firstCategory}" var="firstItem" varStatus="status">
	                  				<c:if test="${firstItem.id == goodsCategory.parentId}">
		                  				<option id="${firstItem.name}" value="${firstItem.id}" selected>
		                  					${firstItem.name}
		                  				</option>
	                  				</c:if>
	                  				<c:if test="${firstItem.id != goodsCategory.parentId}">
		                  				<option id="${firstItem.name}" value="${firstItem.id}">
		                  					${firstItem.name}
		                  				</option>
	                  				</c:if>
	                  			</c:forEach>
	              			</select>
							<select id="secondCategory" onblur="checkGoodsCategaryTwo()" style="height:37px;line-height: 37px;width:252px;font-size: 12px;">
	                   			<option value="">--二级分类--</option>
	                   			<c:if test="${not empty secondCategory}">
	                   				<c:forEach items="${secondCategory}" var="secondItem" varStatus="status">
		                  				<c:if test="${secondItem.id == goodsInfo.goodsCategoryId}">
			                  				<option id="${secondItem.name}" value="${secondItem.id}" selected>
			                  					${secondItem.name}
			                  				</option>
		                  				</c:if>
		                  				<c:if test="${secondItem.id != goodsInfo.goodsCategoryId}">
		                  				<option id="${secondItem.name}" value="${secondItem.id}">
		                  					${secondItem.name}
		                  				</option>
	                  				</c:if>
	                  				</c:forEach>
	                   			</c:if>
	               			</select>
						</div>
					</div>
					<div style="width:100%;height:50px;">
						<div id="price1" style="float:left;width:45%;height: 50px;line-height: 50px;">
							<span class="editlableEdit" style="margin-left:24%;"><em class="emStyle">*</em>商品价格：</span>
							<input id="businessPrice" class="controlEdit" style="margin-left: 20px;width:40%;"
							 onblur="checkPrice()" value="${goodsInfo.price }" type="number"  class="text" maxlength="20" placeholder="请输入商家商品价格"/>
						</div>
						<div style="float:left;width:40%;height: 50px;line-height: 50px;">
							<span style="height:50px;line-height: 50px;font-size:14px;font-family: '微软雅黑'"><em class="emStyle">*</em>市场价：</span>
							<input id="marketPrice" class="controlEdit" style="margin-left: 20px;width:47%;" type="number" 
							 onblur="checkMarketPrice()" maxlength="50" value="${goodsInfo.marketPrice}">
						</div>
					</div>
					<div class="itemEdit">
						<span class="col-sm-1 editlableEdit"><em class="emStyle">*</em>单位：</span>
						<div class="flEdit">
							<input  class="controlEdit" id="unit" type="text" onblur="checkUnit()" maxlength="50" value="${goodsInfo.unit}">
						</div>
					</div>
					<div class="itemTextArea">
						<span class="col-sm-1 editlableTextArea">关键字：</span>
						<div >
							<textarea class="controlTextArea" id="keyword" rows="5" type="text" maxlength="200" placeholder="请输入商品搜索关键字，多个请用,分隔">
								${keyword}
							</textarea>
						</div>
					</div>
					<div style="width:100%;height:50px;">
						<div style="float:left;width:45%;height: 50px;line-height: 50px;">
							<span class="editlableEdit" style="margin-left:24%;">推荐等级：</span>
							<input  class="controlEdit" style="margin-left: 20px;width:40%;" id="recommendLevel" type="number" 
							 onblur="checkRecommendLevel()" maxlength="50" value="${goodsInfo.isRecommend}">
						</div>
						<div style="float:left;width:40%;height: 50px;line-height: 50px;">
							<span style="height:50px;line-height: 50px;font-size:14px;font-family: '微软雅黑'">&nbsp;&nbsp;&nbsp;&nbsp;排序：</span>
							<input  class="controlEdit" style="margin-left: 20px;width:47%;" id="sort" type="number"
							maxlength="50" value="${goodsInfo.sort}">
						</div>
					</div>
					<div class="itemEdit" style="height:180px;">
						<span class="col-sm-1 editlableEdit" style="height:180px;line-height: 180px;">商品图片：</span>
						<div style="margin-top: 40px;float: left;margin-left: 20px;width:77%;">
							<input id="imgLength" type="hidden" value="${fn:length(imgs)}">
							<div id="imgArea" style="float:left;">
								<c:if test="${fn:length(imgs) > 0}">
									<c:forEach items="${imgs}" var="item" varStatus="status">
										<div id="delete${item.url}" style="float:left;" onmouseover="showdelete(this);" onmouseout="hidedelete(this);">
											<input id="imgId${status.index+1}" type="hidden" value="${item.url}">
											<img id="imgPic${item.url}" width="100px" height="100px;" style="border-radius: 14px;float:left;margin-right:10px;" src="${sessionScope.image_logo}${item.url}">
											<span class="deletegoods" onclick="deletePic(this);" style="display: none;"><img title="删除图片" src="${ctx}/images/seller/goods/deletegoods.png"/></span>
										</div>
									</c:forEach>
								</c:if>
							</div>
							<div class="uploadergoods" style="float:left;">
								<div class="acblu banner">
									<a><img style="width:50px;height:50px;float:left;padding: 15px 0px 0px 25px;" title="上传商品图片" src="${ctx}/images/seller/goods/uploader.png" />
									</a>
									<br>
									<div style="padding-top: 4px;width: 100px;float: left;text-align: center;color: #fff;font-size: 14px;">上传</div>
								</div>
							</div>
						</div>
						<div class="mtjxsa" style="float:left;margin-top: 40px;">
								  <p style="text-align: left" id="imageBtn">
									  <input type="hidden" name="imageLogoUrl" id="imageLogoUrl" />
								  </p>
							  </div>
							<%@include file="/views/common/uploader/picture.jsp" %>
					</div>
			<div class="foot">
				<div style="float:left;margin-left:40%;">
					<button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
				</div>
				<div style="float:left;padding-left:5%;">
					<button class="buttonEdit" onclick="gotoGoodsDescrip()">下一步</button>
				</div>
			</div>
	</div>
					<div id="goodsDescrip" style="display: none;">
							<div style="height:40px;line-height: 40px;background-color: #f5f5f5;border:1px solid #dadada;font-weight: bold;">商品描述：</div>
							<div style="height:auto;">
								<div id="ueditor">
									
									<!-- 加载编辑器的容器 -->
								    <script id="container" type="text/plain">${goodsInfo.detail }</script>
									<!-- 配置文件 -->
									<script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.config.js"></script>
									<!-- 编辑器源码文件 -->
									<script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.all.js"></script>
									<script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.parse.js"></script>
									<!-- 实例化编辑器 -->
									<script type="text/javascript">
			
			
									var ue = UE.getEditor('container',{
										toolbars : [
											       	  ['fontfamily','fontsize', '|', 'blockquote', 'horizontal', '|', 'removeformat', '|', 'insertimage'],
											       	  ['bold', 'italic', 'underline', 'forecolor', 'backcolor', '|',
											       	   'justifyleft', 'justifycenter', 'justifyright', '|',
											       	   'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
											       	   'insertorderedlist', 'insertunorderedlist', '|',
											       	   'imagenone', 'imageleft', 'imageright', 'imagecenter','autotypeset','cleardoc','source'
											       	   ]
											       	],
										UEDITOR_HOME_URL: '${ctx}/js/lib/ueditor/',
										serverUrl: '${ctx}/fileHandler/upLoaderMergeForUeditor',
										//imageUrlPrefix: '${ctx}/fileHandler/getFileForUeditor?fileName=',
										imageUrlPrefix: '${sessionScope.image_logo}',
										imageActionName: 'uploadimage',
										imageFieldName: 'file',
										imageMaxSize: 1024000,
										imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif'],
										initialFrameHeight: 200,
										initialFrameWidth: '99.8%',
										elementPathEnabled: false,
										retainOnlyLabelPasted:true,
										wordCount: false,
										/* sourceEditor: 'textarea', */
										insertorderedlist: {
											// 系统自带
											'decimal': '',     // '1,2,3...'
											'lower-alpha': '', // 'a,b,c...'
											'lower-roman': '', // 'i,ii,iii...'
											'upper-alpha': '', // 'A,B,C'
											'upper-roman': ''  // 'I,II,III...'
										},
										insertunorderedlist : {
											// 系统自带
											'circle': '',  // '○ 小圆圈'
											'disc': '',    // '● 小圆点'
											'square': ''   // '■ 小方块'
										},
										listDefaultPaddingLeft: '50'
									});
										</script>
							</div>
					</div>
					<div style="height:50px;border:1px solid #dadada;padding-top:15px;margin-top: -1px;">
						<div style="float:left;margin-left:40%;">
							<button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
						</div>
						<div style="float:left;padding-left:5%;">
							<button class="buttonEdit" onclick="gotoGoodsSpec();">下一步</button>
						</div>
					</div>
				</div>
				
				<div id="goodsSpec" style="display: none;border:1px solid #dadada;">
				<div style="background-color: #fff;">
					<!--新增自定义属性  -->
					<div>
						<div >
							<div style="background-color: #F5F5F5;border-bottom: 1px solid #dadada;">
								<img style="margin-left:23px;margin-top: -5px;" src="${ctx}/images/seller/goods/goodsinfo.png"/>
								<span style="height:45px;line-height: 45px;padding-left:13px;font-family: '微软雅黑';">商品规格</span>
							</div>
							<div style="background-color: #fff;height:80px;">
								<a href="javascript:void(0);" onclick="showDefineAttr();" class="btn_addPic"><img width="21px;" style="margin-top:-2px;" src="${ctx}/images/seller/goods/addAttr.png" />
									<span>新增自定义属性</span>
								</a>
								<a href="javascript:void(0);" onclick="appendRow();" class="btn_addPic"><img width="21px;" style="margin-top:-2px;" src="${ctx}/images/seller/goods/addAttr.png" />
									<span>新增规格</span>
								</a>
							</div>
						</div>
					</div>
					
					<div id="defineAttr" style="display: none;">
						<div style="background-color: #F5F5F5;">
							<img style="margin-left:23px;margin-top: -5px;" src="${ctx}/images/seller/goods/goodsinfo.png"/>
							<span style="height:45px;line-height: 45px;padding-left:13px;font-family: '微软雅黑';">新增自定义属性</span>
							<div style="background-color: #fff;height:80px;">
								<input class="inputClass" type="text" id ="attr_name" class="text" maxlength="20" placeholder="请填写属性名称"/>
								<div class="addorcancleAttr" onclick="appendCloumn();">新增</div>
								<div class="addorcancleAttr" onclick="hideDefineAttr();">取消</div>
							</div>
						</div>
					</div>
				</div>
                <div class="add-newattr">
                    <table id="attr_spec" >
                        <tr>
                            <td class="bg-td" width="150px">价格</td>
                            <td class="bg-td" width="150px">库存</td>
                            <!-- <td class="bg-td" width="150px" >图片</td> -->
                            <td class="bg-td" width="150px">操作</td>
                        </tr>
                    </table>
                </div>
				<div>
					<div id="goodsSpecification" style="margin:0px 20px;"></div>
					<div class="foot">
						<div style="float:left;margin-left:40%;">
							<button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
						</div>
						<div style="float:left;padding-left:1%;">
							<button class="buttonEdit" onclick="saveGoodsInfo();">保&nbsp;&nbsp;存</button>
						</div>
					</div>
				</div>
				</div>
		</section>
		<script src="${ctx}/js/controllers/HomeGoodsInfoEditController.js" type="text/javascript"></script>
    	<script type="text/javascript">
		var ctx = '${ctx}';
		setCtx(ctx);
	</script> 
	<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
	<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
